<template>
    <div>
        <div class="mg-content">
             <el-row :gutter="20">
                <el-col :span="6">
                    <div class="el-input el-input-group el-input-group--prepend el-input--medium" >
                        <div class="el-input-group__prepend" tabindex="-1">卡类型</div>
                        <el-select class="el-cascader-margin w-100p" placeholder="请选择" v-model="input">
                            <el-option
                            v-for="item in typeList"
                            :key="item.id"
                            :label="item.name"
                            size="medium"
                            :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                </el-col>
                <!--<el-col :span="6">-->
                    <!--<div class="el-input el-input-group el-input-group&#45;&#45;prepend el-input&#45;&#45;medium" >-->
                        <!--<div class="el-input-group__prepend" tabindex="-1">发卡机构</div>-->
                        <!--<el-cascader placeholder="请选择发卡机构" class="el-cascader-margin w-100p"  size="medium"-->
                                    <!--:options="treeData"-->
                                    <!--:show-all-levels="false"-->
                                    <!--change-on-select>-->
                        <!--</el-cascader>-->
                    <!--</div>-->
                     <!--&lt;!&ndash; <el-input  v-model="input"  size="medium" @keyup.enter.native="keyDown($event)" placeholder="请输入类别名称" :maxlength="20"></el-input> &ndash;&gt;-->
                <!--</el-col>-->
                <el-col :span="10">
                    <div  class="text-left">

                        <el-button type="primary"  size="medium" class="btn-info"   icon="el-icon-search"  @click="search">搜索</el-button>
                        <el-button type="primary" size="medium" class="btn-warning" style="margin-left: 1px"   icon="el-icon-refresh" @click="cleanSearch">重置</el-button>
                          <!--<el-button type="primary"  class="title-button btn-primary" @click="addShow=true;activityId=''" icon="plus">新建&nbsp;</el-button>-->
                    </div>
                </el-col>
            </el-row>

          <div class="title-buttons">
            <el-button v-hasPermission="'management_deliveryRecord:export'" class="title-button btn-primary"  size="medium" @click="" icon="el-icon-plus">导出&nbsp;</el-button>
          </div>
             <el-row :gutter="20">
                <!--<el-col :span="4">-->
                    <!--<div class="me_title"  >原料分类</div>-->
                    <!--<el-tree :data="treeData"  :props="defaultProps" style="height:400px;overflow-y:auto" :highlight-current="true" :expand-on-click-node="true" :default-expand-all="true" @node-click="handleNodeClick"></el-tree>-->
                <!--</el-col>-->
                <el-col :span="24">
                <el-table
                     v-loading="loading"
                     :data="tableData"
                     :border="true"
                     style="width: 100%">
                    <el-table-column
                       type="index"
                       width="50">
                    </el-table-column>
                    <el-table-column
                        type="selection"
                        width="55">
                    </el-table-column>
                    <el-table-column
                            label="卡号">
                        <template  slot-scope="scope">
                            <span >{{scope.row.startNo}}-{{scope.row.endNo}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="卡数量">
                        <template  slot-scope="scope">
                         {{scope.row.count}}
                        </template>
                    </el-table-column>
                    <!--<el-table-column-->
                            <!--label="发卡机构">-->
                        <!--<template  slot-scope="scope">-->
                            <!--<span >&#45;&#45;&#45;&#45;</span>-->
                        <!--</template>-->
                    <!--</el-table-column>-->
                    <el-table-column
                            label="可消费机构">
                        <template  slot-scope="scope">
                            <span v-if="scope.row.branchName">{{scope.row.branchName}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="创建时间">
                        <template  slot-scope="scope">
                            <span v-if="scope.row.createAt">{{scope.row.createAt}}</span>
                        </template>
                    </el-table-column>
                  <el-table-column
                    label="操作" width="200">
                    <template scope="scope" >
                      <!--<el-button type="text" size="small" style="margin: 0px;" @click=""  >启用</el-button>-->
                      <el-button type="text" size="small" style="margin: 0px;"  @click="addShow=true;activityId=scope.row.id" >查看</el-button>&nbsp;
                      <!--<el-button type="text" size="small" style="margin: 0px;"  @click="addShow=true;activityId=scope.row.id">修改</el-button>-->
                      <el-button v-hasPermission="'management_deliveryRecord:destory'" @click="handleDelete(scope.$index,scope.$index,scope.row.id)"
                                 type="text" size="small"
                      >删除</el-button>
                    </template>
                  </el-table-column>

                </el-table>
                </el-col>
            </el-row>
            <br>
            <div class="block">
                <el-row>
                    <el-col :span="24" class="text-right">
                       <el-pagination
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="currentPage"
                           :page-sizes="pageSizes"
                           :page-size="pageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="total">
                       </el-pagination>
                    </el-col>
                </el-row>
            </div>
        </div>
        <model :isShow="addShow" :id="activityId" @close="addClose" @addSuccess="addSuccess"></model>
        <PluginConfirm
                :show="dialogIsShow"
                @chooseSure="chooseSure()"
                @chooseCancel="chooseCancel()"
                @dialogResult="dialogResult">
        </PluginConfirm>
    </div>
</template>
<script>
    //注意路径
    import model from './model.vue'
    export default{
        data(){
            return {
                treeData:[],
                defaultProps: {
                    children: 'children',
                    label:function(data){
                            return "["+data.no+"]"+data.name;
                        }
                },
                loading:false,
                tableData: [],
                pageSizes:window.pageSizes,//所有可选择的条数
                pageSize:window.pageSize,//控制一页显示的条数
                total:10,//总条数
                input:"",
                currentPage:1,
                inputValue:"",
                dialogIsShow:false,
                addShow:false,
                activityId:"",
                dialogIsShow:false,
                curDataRow:null,
                curDataIndex:0,
                selectItmeIndex:"",
                selectItemDetailsIndex:"",
                selectDelId:"",
              typeList:[]

            }
        },
        components: {
           model
        },
        created(){
            window.this = this;
            this.initData();
        },
        methods: {
            initData(){
                this.currentPage=1;
                this.getData();
            },
            keyDown(ev){
                if(ev.keyCode==13) {
                    this.currentPage=1;
                    this.inputValue=this.input;
                    this.getData();
                }
            },
            cleanSearch(){
                this.currentPage=1;
                this.input="";
                this.inputValue=this.input;
                this.getData();
            },
            search(){
                this.currentPage=1;
                this.inputValue=this.input;
                this.getData();
            },
            handleCurrentChange(currentPage){
                this.currentPage=currentPage;
                this.getData();
            },
            getData(){
                // this.loading=true;
                this.$axios.get("members/deliveryRecords?page.pn="+this.currentPage+"&page.size="+this.pageSize+"&search.cardTypeId_eq="+this.inputValue).then((data)=>{
                    this.loading=false
                    this.tableData=data.content.deliveryRecordPage.content;
                    this.total=data.content.deliveryRecordPage.totalElements;
                    this.typeList=data.content.typeList;
                }).catch(function(err){
                 })
            },
            handleDelete(index,delIndex,id) {
                this.selectItmeIndex=index,
                this.selectItemDetailsIndex=delIndex;
                this.selectDelId=id;
                this.dialogIsShow=true;
            },
             dialogResult(param){
                this.dialogIsShow=param.close;
                if(param.choose==="ok"){
                    //console.log("确定");
                    this.$axios.delete("members/deliveryRecords/"+this.selectDelId).then(data=>{
                        if(data.status==200){
                            this.tableData.splice(this.curDataIndex,1);
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.initData();
                        }else{
                            this.$message({
                                type: 'error',
                                message: data.message
                            });
                        }
                    })
                }else if(param.choose==="cancel"){
                    //console.log("取消");
                }else{
                    //console.log("不做处理");
                }
            },

              addSuccess(item){
                this.addShow=false;
                this.currentPage=1;
                this.initData();
              },

            addClose(){
                this.addShow=false;
            },
            handleSizeChange(val){
                this.pageSize=val;
                this.getData();
            },
        }
    }
</script>
<style scoped>
</style>
